<template>
  <div class="outbreakbox">
    <h2>疫情公告</h2>
    <ul>
      <li v-for="(v,i) in list" :key="i">
        <p>
          <button type="button" @click="detail(v)">{{v.noticetitle}}</button>
          <span @click="detail(v)">详情公告 >></span>
        </p>
        <time>{{v.updatetime}}</time>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'organization',
    data() {
      return {
        pagesize: 10,
        pagecurrent: 1,
        list: []
      }
    },
    mounted() {
      this.getUserInfo();
      this.getlist()
    },
    methods: {
      // 用户信息
      getUserInfo() {
        this.$http('/user/loginindex', {}).then(
          res => {
            console.log(res)
            if (res.code == 200) {
              this.$store.commit('changeagent',res.data.user.organizationname);
              this.$store.commit('changeagenter',res.data.user.collegename);
              this.$store.commit('changeuser',res.data.user.username);
              this.$store.commit('changephone',res.data.user.phone);
              this.$store.commit('changerole',res.data.roleid);
              this.$store.commit('changeposition',res.data.user.position);
            }
          }
        )
      },
      getlist() {
        this.$http('/tnotice/noticeall', {
          "pagecurrent": this.pagecurrent,
          "pagesize": this.pagesize
        }).then(res => {
          console.log(res)
          if(res.code == 200){
            this.list = res.data.records
          }
        })
      },
      detail(v) {
        var obj = JSON.stringify(v)
        this.$router.push({
          path: '/newsdetail',
          query: {
            context: obj
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .outbreakbox {
    h2 {
      font-size: 16px;
      color: #fff;
      line-height: 44px;
      margin-bottom: 20px;
    }

    ul {
      overflow: hidden;
      width: 100%;
      background-color: #000418;

      li {
        display: block;
        width: 100%;
        border-bottom: 1px solid #2f3242;
        padding: 20px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

        &:last-child {
          border-bottom: none;
        }

        p {
          display: flex;
          justify-content: space-between;

          button {
            border: none;
            font-size: 14px;
            color: #fff;
            line-height: 44px;
            background-color: transparent;
            cursor: pointer;

            &:focus {
              outline: none;
            }

            &:hover {
              color: #4353da;
            }
          }

          span {
            font-size: 13px;
            color: #4353da;
            line-height: 44px;
            cursor: pointer;

            &:hover {
              color: orangered;
            }
          }
        }

        time {
          display: inline-block;
          font-size: 13px;
          color: #999;
          line-height: 34px;
        }
      }
    }
  }
</style>
